// components/radio-tree/index.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        list: {
            type: Array,
            required: true,
			value: function(){
				return []
			}
        },
        checkedId: {
            type: Number || String,
			value: ''
        },
        disabled: {
            type: Boolean,
			value: false
        },
        key: {
            type: String,
            required: true,
			value: ""
        },
        value: {
            type: String,
            required: true,
			value: ""
        },
        rangeKey: {
            type: String,
			value: "name"
        },
        pIdKey:  {
            type: String,
			value: "pId"
        },
        valueKey: {
            type: String,
			value: "id"
        }
    },


    /**
     * 组件的初始数据
     */
    data: {
        show: false,
        pId: '',
        treeList: [],
        currentItem: {}
    },

    observers: {
        'list': function(newValue, oldValue) {
            if(newValue.length>0){
                let pId = this.getPid(newValue);
                if(this.data.checkedId){
                    let o = newValue.find(v => v[this.data.valueKey] == this.data.checkedId);
                    newValue.map(v => {
                        if(v[this.data.valueKey] == this.data.checkedId){
                            v.checked = true;
                            this.setData({
                                currentItem: v
                            })
                        }
                        return v
                    })
                    this.parentOpenChecked(newValue,o,pId);
                }
                
                let treeList = this.getTreeList(newValue,pId);
                this.setData({
                    pId,
                    treeList,
                })
            }
        },
        'checkedId': function(newValue, oldValue) {
            let { list } = this.data;
            if(newValue){
                let pId = this.getPid(list);
                if(list){
                    let o = list.find(v => v[this.data.valueKey] == newValue);
                    list.map(v => {
                        if(v[this.data.valueKey] == newValue){
                            v.checked = true;
                            this.setData({
                                currentItem: v
                            })
                        }
                        return v
                    })
                    this.parentOpenChecked(list,o,pId);
                }
                
                let treeList = this.getTreeList(list,pId);
                this.setData({
                    pId,
                    treeList,
                })
            }
        },
    },

    /**
     * 组件的方法列表
     */
    methods: {
        showPopup(){
            if(this.data.disabled){
                return
            }
            this.setData({
                show: true
            })
        },
        // 获取顶级pId
        getPid(list){
            let pId = '';
            for(let i = 0; i < list.length; i++){
                pId = list[i].pId;
                for(let j = 0; j < list.length; j++){
                    if(list[i][this.data.pIdKey] == list[i][this.data.valueKey]){
                        pId = '';
                    }
                }
            }
            return pId
        },
        //获取树形菜单
        getTreeList (list,pId) {
            let result = [];
            list.forEach(item => {
                if(item[this.data.pIdKey] == pId){
                    item.children = this.getTreeList(list,item[this.data.valueKey])
                    result.push(item)
                }
            })
            return result
        },

        //树形菜单展开闭合
        open(e){
            let { item } = e.detail;
            let { list, pId } = this.data;
            list.map(v => {
                if(v[this.data.valueKey] == item[this.data.valueKey]){
                    v.open = !v.open;
                }
                return v
            })
            let treeList = this.getTreeList(list,pId);
            this.setData({
                treeList,
            })
        },
        //选中
        checked(e){
            let { item } = e.detail;
            let { list, pId } = this.data;
            list.map(v => {
                v.checked = false;
                v.leftIconChecked = false;
                if(v[this.data.valueKey] == item[this.data.valueKey]){
                    v.checked = true;
                }
                return v
            })
            this.parentLeftIconChecked(list,item);
            let treeList = this.getTreeList(list,pId);
            this.setData({
                treeList,
                currentItem: item
            })
        },
        //向上查找父级 设置左边箭头颜色
        parentLeftIconChecked(list,item){
            let { pId } = this.data;
            list.map(v => {
                if(v[this.data.valueKey] == item[this.data.valueKey]){
                    v.leftIconChecked = true;
                }
                return v
            })
            if(item[this.data.pIdKey] != pId){
                let o = list.find(v => v[this.data.valueKey] == item[this.data.pIdKey]);
                this.parentLeftIconChecked(list,o);
            }
        },
        // 左侧箭头选中标识
        parentOpenChecked(list,item,pId){
            list.map(v => {
                if(v[this.data.valueKey] == item[this.data.valueKey]){
                    v.leftIconChecked = true;
                    v.open = true;
                }
                return v
            })
            if(item[this.data.pIdKey] != pId){
                let o = list.find(v => v[this.data.valueKey] == item[this.data.pIdKey]);
                this.parentOpenChecked(list,o,pId);
            }
        },
        // 关闭弹窗
        close(e){
            this.setData({
                show: false
            })
        },
        // 确定选择
        confirm(e){
            this.setData({
                show: false
            })
            this.triggerEvent('confirm', {
                key: this.data.key,
                item: this.data.currentItem
            });
        }
    }
})
